<template>
  <!-- 整体容器 -->
  <el-container style="height: 100vh;">
    <!-- 左侧固定侧边栏 -->
    <el-aside width="220px" style="background-color: #2f4050; color: #fff;">
      <!-- 用户信息区域 -->
      <div class="user-info">
        <el-avatar 
          size="large" 
          icon="el-icon-user" 
          style="margin: 20px auto; display: block;"
        ></el-avatar>
        <p class="user-name">{{ formattedDoctorName }}</p>
        <p class="user-role">主任医师</p>
      </div>

      <!-- 侧边栏菜单 -->
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        background-color="#2f4050"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleMenuSelect"
      >
        <!-- 医生首页 -->
        <el-menu-item index="/yisheng/ho">
          <i class="el-icon-house"></i>
          <span>医生首页</span>
        </el-menu-item>

        <!-- 功能菜单 -->
        
        <el-menu-item index="/yisheng/paiban">
          <i class="el-icon-schedule"></i>
          <span>查看排班</span>
        </el-menu-item>
        <el-menu-item index="/yisheng/jiezhen">
          <i class="el-icon-user-solid"></i>
          <span>接诊挂号患者</span>
        </el-menu-item>
        <el-menu-item index="/yisheng/gaimima">
          <i class="el-icon-s-tools"></i>
          <span>修改个人信息</span>
        </el-menu-item>

        <!-- 退出登录 -->
        <el-menu-item index="logout">
          <i class="el-icon-switch-button"></i>
          <span>退出登录</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 右侧内容容器（局部切换区域） -->
    <el-container>
      <!-- 顶部工具栏 -->
      <el-header style="background-color: #fff; border-bottom: 1px solid #e6e6e6;">
        <div class="header-left">
          <h1 class="main-title">医生工作站</h1>
          <p class="sub-title">高效·精准·智能</p>
        </div>
        <div class="header-right">
          <el-date-picker
            v-model="currentDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 180px; margin-right: 20px;"
          ></el-date-picker>
          <el-button type="primary" size="small">
            <i class="el-icon-bell"></i>
            <span>消息 (3)</span>
          </el-button>
        </div>
      </el-header>

      <!-- 动态内容区域（路由视图，实现局部切换） -->
      <el-main style="padding: 20px; background-color: #f9f9f9;">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/user' 
import { ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router' 

const userStore = useUserStore()
const router = useRouter() 
const route = useRoute()
const currentDate = ref(new Date())
const activeMenu = ref('') // 控制菜单选中状态

// 处理医生姓名（示例：李宁宁 → 李医生）
const formattedDoctorName = computed(() => {
  const realName = userStore.userInfo?.realName || '医生'
  return realName.charAt(0) + '医生' 
})

// 初始化默认选中菜单
onMounted(() => {
  activeMenu.value = route.path // 根据当前路由设置选中菜单
})

// 菜单点击事件
const handleMenuSelect = (index) => {
  if (index === 'logout') {
    // 退出登录逻辑
    logout()
  } else {
    // 路由跳转
    router.push(index)
    activeMenu.value = index // 更新选中状态
  }
}

// 退出登录逻辑
const logout = () => {
  ElMessageBox.confirm(
    '确定要退出登录吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    userStore.clearUserInfo() // 清除用户信息（需在 Pinia 中实现）
    router.push('/home')      // 返回主页
  }).catch(() => {
    // 取消操作
  })
}
</script>

<style scoped>
/* 侧边栏样式 */
.el-aside {
  overflow-y: auto; /* 内容超出时滚动 */
}
.user-info {
  text-align: center;
  padding: 20px 0;
  border-bottom: 1px solid #4e5e6d;
}
.user-name {
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0 5px;
}
.user-role {
  font-size: 12px;
  color: #dcdcdc;
}

/* 顶部工具栏样式 */
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.header-left {
  display: flex;
  flex-direction: column;
}
.main-title {
  font-size: 24px;
  margin: 0;
  font-weight: 600;
}
.sub-title {
  font-size: 14px;
  color: #666;
  margin: 2px 0 0;
}
.header-right {
  display: flex;
  align-items: center;
}

/* 内容区域样式 */
.el-main {
  overflow-y: auto; /* 内容超出时滚动 */
}

/* 菜单选中样式优化 */
.el-menu-item.is-active {
  background-color: #1f2d3d !important;
}
</style>